<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          v-model="form.keyword"
          style="margin-bottom:10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
          @input="changeValue"
        />
        <!-- 树形组件 -->
        <!-- :expand-on-click-node="false"点箭头图标的时候才会展开或者收缩节点 default-expand-all 默认展开所有节点 -->
        <!-- highlight-current 点击高亮  @current-change="selectNode" 切换节点显示当前节点数据-->
        <el-tree
          ref="treeRef"
          :data="dataList"
          :props="defaultProps"
          node-key="id"
          :expand-on-click-node="false"
          default-expand-all
          highlight-current
          @current-change="selectNode"
        />
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary" @click="addClick">添加员工</el-button>
          <el-button size="mini" @click="importClick">excel导入</el-button>
          <el-button size="mini" @click="exportClick">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="arrList">
          <el-table-column align="center" fixed prop="staffPhoto" label="头像" width="110">
            <!-- 需要处理一下变成图标 如果没有图片就变成一个我们自己做的图片 -->
            <template v-slot="{row}">
              <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" :size="35" align="center" />
              <div v-else class="user-user-img">{{ row.username?.charAt(0) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="username" label="姓名" width="100" />
          <el-table-column align="center" prop="mobile" label="手机号" width="120" />
          <el-table-column align="center" prop="workNumber" label="工号" width="120" />
          <el-table-column align="center" prop="formOfEmployment" label="聘用形式" width="110">
            <!-- 需要把1和0处理一下变成 正式和试用 -->
            <template v-slot="{row}">
              <span>{{ row.formOfEmployment === 1 ?'正式':'试用' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="departmentName" label="部门" width="125" />
          <el-table-column align="center" prop="timeOfEntry" label="入职时间" width="120" />
          <el-table-column align="center" fixed="right" label="操作" width="130">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="isEsitClick(row.id)"> 操作 </el-button>
              <el-button type="text" size="small" @click="jueclick"> 角色 </el-button>
              <el-button type="text" size="small" @click="deleteclick(row.id)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 点击角色后的弹窗 -->
        <el-dialog width="500px" title="新增角色" :visible.sync="showDialog" @close="close">
          <!-- 表单内容 -->
          <el-form ref="roleForm" label-width="120px">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item in checkList" :key="item.id" :label="item.name" :value="item.id" />
            </el-checkbox-group>
            <el-form-item>
              <el-row type="flex" justify="center">
                <el-col :span="12">
                  <el-button type="primary" size="mini" @click="addButton">确定</el-button>
                  <el-button size="mini" @click="cancelButton">取消</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <!-- 放置分页组件 -->
          <!-- page-size 每页显示条目个数 -->
          <!-- current-page 当前页数 -->
          <!-- handleCurrentChange 点击时会触发的事件 -->
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :current-page="form.page"
            :page-size="form.pagesize"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </div>
    <!--  导入  表格导入的组件 通过父子传值 把showExcelDialog 传给子组件 -->
    <importExcel :show-excel-dialog.sync="showExcelDialog" :upload-success="getCompany" />
  </div>
</template>

<script>
import { getCompanyRequest } from '@/api/department'
// 导入递归
import { dataRecursion } from '@/utils/index'
// 导入本页面需要用的axios
import { getEmployeeList, delEmployeeList, excelExportList, getRoleList } from '@/api/employee'
// 使用一个npm包 直接将blob文件下载到本地 file-saver
import FileSaver from 'file-saver'
// 局部组件
import importExcel from '@/views/employee/components/import-excel.vue'
export default {
  name: 'Employee',
  components: {
    importExcel
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 搜索框
      input: '',
      // 声明一个数组作为树形数据渲染页面
      dataList: [],
      // 声明一个数组作为右侧表单渲染页面
      arrList: [],
      // 树形数据渲染的载体
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 用于发送请求需要放在请求data里面的数据
      form: {
        page: 1, // 当前页码数
        pagesize: 10, // 当前页面需要的数据条数
        keyword: '', // 表单输入 根据名字模糊查询
        departmentId: null // 部门id,根据部门查询当前部门及子部门的用户
      },
      showExcelDialog: false, // 控制导入excel的弹层显示和隐藏 默认隐藏
      // 控制点击角色后的表格弹窗
      showDialog: false,
      // 弹框里面的选择框的值
      checkList: []
    }
  },
  // 调用 获取-部门列表 axios
  created() {
    this.getCompany()
  },
  methods: {
    // 发送  获取-部门列表 axios
    async getCompany() {
      const res = await getCompanyRequest()
      // console.log(res)
      // 把响应回来的数据赋值给我们定义的新数组 用于渲染页面
      // 此时我们发现页面上全部都是铺平的数据 ,我们需要把铺平数据转化为树形数组,我们使用递归的方式进行处理
      // 调用递归函数
      this.dataList = dataRecursion(res, 0)
      // 获取数组的id值 通过这个 后面进行 发送右侧表单的ajax 首次渲染直接渲染全部页面
      this.form.departmentId = this.dataList[0].id
      // 获取了树形组件的 所有数据以后， 将第一个数据高亮显示 element组件里面关于树形数据做了一个方法
      // 设置选中节点
      // 树组件渲染是异步的 等到更新完毕
      this.$nextTick(() => {
        // 此时意味着树渲染完毕
        this.$refs.treeRef.setCurrentKey(this.form.departmentId)
      })
      // 调用右侧表格axios
      this.getEmployee()
    },
    // 封装获取右侧表格的axios 因为要在好几个地方使用
    async getEmployee() {
      const res = await getEmployeeList(this.form)
      console.log(res)
      // 响应回来的数据进行右侧表格渲染
      this.arrList = res.rows
      // 响应回来的数据进行总条数渲染
      this.total = res.total
    },
    // 切换节点时再次记录id
    selectNode(node) {
      this.form.departmentId = node.id
      // 调用右侧表格axios
      this.getEmployee()
    },
    // 点击切换分页时 触发的时间
    handleCurrentChange(item) {
      console.log(item)
      // 将点击后的页码赋值给当前页码数
      this.form.page = item
      // 调用右侧表格axios
      this.getEmployee()
    },
    // input事件 当输入框有文字 触发
    changeValue(newvalue) {
      console.log(newvalue)
      // 将获取的值 赋值给form. keyword
      this.form.keyword = newvalue
      // 调用右侧表格axios
      this.getEmployee()
    },
    // 点击删除按钮
    async deleteclick(id) {
      console.log(id)
      // 发送axios请求
      await delEmployeeList(id)
      // 提示框
      this.$message('已删除')
      // 调用右侧表格axios
      this.getEmployee()
    },
    // 导出表格
    async  exportClick() {
      // 发送ajax请求
      const result = await excelExportList()// 导出所有的员工接口
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件
    },
    // 导入表格
    importClick() {
      this.showExcelDialog = true
    },
    // 点击添加员工按钮
    addClick() {
      this.$router.push('/employee/detail')
    },
    // 点击表格编辑
    isEsitClick(id) {
      this.$router.push(`/employee/detail/${id}`)
    },
    // 点击表格里面的角色按钮
    async jueclick() {
      // 开启模态框
      this.showDialog = true
      // 发送请求,获取数据来渲染页面
      const res = await getRoleList()
      console.log(res)
      // 把响应回来的值赋值给选框
      this.checkList = res
    },
    // 模态框 点击X取消
    close() {
      // 关闭模态框
      this.showDialog = false
    },
    // 确定按钮
    addButton() {
      // 调用X取消
      this.close()
    },
    // 取消按钮
    cancelButton() {
      // 调用X取消
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
    .user-user-img {
      margin: 0 auto;
      width: 35px;
      height: 35px;
      background-color: #276ffb;
      text-align: center;
      line-height: 35px;
      color: #f0f4ff;
      border-radius: 50%;
    }
  }
}

</style>
